<template>
  <el-container>
    <el-header>
      <div>
        <el-form :model="search" ref="queryForm" :inline="true">
          <el-form-item label="关键字" prop="keywoard">
            <el-input v-model="search.keywoard" placeholder="登录账号 / 姓名" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button-group>
              <el-button type="primary" icon="el-icon-search" @click="upsearch"> 查询 </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>
    </el-header>

    <el-main class="nopadding">
      <scTable
        ref="table"
        tableName="listCustomColumn"
        :apiObj="apiObj"
        :params="search"
        :column="column"
        row-key="id"
        @selection-change="selectionChange"
        stripe
      >
        <!-- 渠道 -->
        <template #channelNameoperator="scope">
          <el-tag :key="scope.row.id" effect="dark">
            {{ scope.row.channelName }}
          </el-tag>
        </template>

        <!-- 用户 -->
        <template #userNameoperator="scope">
          <el-tag :key="scope.row.id" effect="dark">
            {{ scope.row.userName }}
          </el-tag>
        </template>

        <!-- 模型 -->
        <template #modelNameoperator="scope">
          <el-tag :key="scope.row.id" effect="dark">
            {{ scope.row.modelName }}
          </el-tag>
        </template>

        <!-- 额度 -->
        <template #quotaoperator="scope">
          <el-tag :key="scope.row.id" effect="dark">
            {{ moneyFormat(scope.row.quota) }}
          </el-tag>
        </template>
      </scTable>
    </el-main>
  </el-container>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue';

export default {
  name: 'AIChatLoggerManage',
  components: {
    ArrowDown,
  },
  data() {
    return {
      apiObj: this.$API.aiChatLogger.page,
      search: {
        startTime: '',
        endTime: '',
        userId: '',
        type: 0,
        modelName: '',
      },
      column: [
        {
          label: '时间',
          prop: 'creationTime',
          width: '150',
        },
        {
          label: '渠道',
          prop: 'channelNameoperator',
          width: '100',
        },
        {
          label: '用户',
          prop: 'userNameoperator',
          width: '150',
        },
        {
          label: '模型',
          prop: 'modelNameoperator',
          width: '180',
        },
        {
          label: '提示tokens',
          prop: 'promptTokens',
          width: '100',
        },
        {
          label: '完成tokens',
          prop: 'completionTokens',
          width: '100',
        },
        {
          label: '请求IP地址',
          prop: 'ip',
          width: '150',
        },
        {
          label: '客户端信息',
          prop: 'userAgent',
          width: '250',
        },
        {
          label: '额度',
          prop: 'quotaoperator',
          width: '150',
        },
        {
          label: '详情',
          prop: 'content',
          width: '200',
        },
      ],
    };
  },
  computed: {
    moneyFormat() {
      return function (row) {
        if (row == undefined) return '';
        // 计算金额
        return '$' + row.toFixed(6);
      };
    },
  },
  methods: {
    dateIfAddZero(time) {
      return time < 10 ? '0' + time : time;
    },

    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
  },
};
</script>

<style>
.query-select {
  max-width: 100px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
